<template>
  <div class="data-screen" :class="hasMenu ? 'full-screen-height' : ''">
    <!-- 顶部标题 -->
    <div class="header">
      <!-- <h2>海迅智能船舶智能AI监控系统</h2> -->
       <h2>船舶智能AI监控系统</h2>
    </div>

    <!-- 主内容区 -->
    <div class="main-container">
      <!-- 左侧两个盒子 -->
      <div class="left-column" :class="hasMenu ? 'full-screen-column' : ''">
        <div class="panel left-top">
          <div class="panel-title">公司列表</div>
          <div class="tree-box">
            <el-tree :data="departmentData" accordion :props="departmentProps" @node-click="departmentClick" />
          </div>
        </div>
        <div class="panel left-bottom">
          <div class="panel-title">船舶信息</div>
          <div class="ship-list">
            <div class="ship-item">船舶名称：{{shipMessage.deptName || '--'}}</div>
            <div class="ship-item">英文名称：{{shipMessage.enName || '--'}}</div>
            <div class="ship-item">管理公司：{{shipMessage.companyName || '--'}}</div>
            <div class="ship-item">绑定船队：{{shipMessage.parentName || '--'}}</div>
            <div class="ship-item">船长名称：{{shipMessage.ownerName || '--'}}</div>
            <div class="ship-item">船长电话：{{'--'}}</div>
            <div class="ship-item">MMSI号：{{shipMessage.imo || '--'}}</div>
            <div class="ship-item">识别号：{{shipMessage.identification || '--'}}</div>
            <div class="ship-item">船旗国：{{shipMessage.country || '--'}}</div>
            <div class="ship-item">船籍港：{{shipMessage.port || '--'}}</div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title">AI抓怕分布</div>
          <div v-if="isEmpty" style="text-align: center;width: 100%;">暂无数据</div>
          <eChart2 v-else ref="eChart2Ref" />
        </div>
      </div>

      <!-- 中间大盒子 -->
      <div class="center-panel" style="position: relative;">
        <MapComponents v-if="aisMessages.length == 0" class="map-box" />
        <MapComponent v-else :aisMessage="aisMessage" ref="mapRef" class="map-box" />
        <div class="panel-body">
          <div class="panel panel-left">
            <div class="panel-title">告警统计<span class="alarm-total" v-if="alarmTotal > 0"> (共{{ alarmTotal }}次)</span></div>
            <div v-if="isEmpty" style="text-align: center;width: 100%;">暂无数据</div>
            <eChart3 v-else ref="eChart3Ref" />
          </div>
          <div class="panel panel-right">
            <div class="panel-title">告警趋势</div>
            <div v-if="isWEmpty" style="text-align: center;width: 100%;">暂无数据</div>
            <eChart1 v-else ref="eChart1Ref" />
          </div>
        </div>
      </div>

      <!-- 右侧盒子 -->
      <div class="right-column" :class="hasMenu ? 'full-screen-column' : ''">
        <div class="panel right-top">
          <div class="panel-title">实时告警</div>
          <ScreenAlarm />
        </div>
      </div>
    </div>

    <!-- 底部四个盒子 -->
    <!-- <div class="footer">
      <div class="panel">
        <div class="panel-title">实时告警</div>
        <div class="chart-alarm">
          <alarmList ref="alarmRef" />
        </div>
      </div>
      <div class="panel">
        <div class="panel-title">告警统计<span class="alarm-total" v-if="alarmTotal > 0"> (共{{ alarmTotal }}次)</span></div>
        <div v-if="isEmpty" style="text-align: center;width: 100%;">暂无数据</div>
        <eChart3 v-else ref="eChart3Ref" />
      </div>
      <div class="panel">
        <div class="panel-title">告警趋势</div>
        <div v-if="isWEmpty" style="text-align: center;width: 100%;">暂无数据</div>
        <eChart1 v-else ref="eChart1Ref" />
      </div>
      <div class="panel chart-box">
        <div class="panel-title">系统信息</div>
        <div class="chart-right-bottom" style="margin-left: -40px;">
          <eChart6 ref="eChart6Ref" />
        </div>
        <div class="chart-right-bottom">
          <eChart5 ref="eChart5Ref" />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
  // 引入组件
  import eChart1 from './eChart/eChart1.vue';
  import eChart2 from './eChart/eChart2.vue';
  import eChart3 from './eChart/eChart3.vue';
  import eChart4 from './eChart/eChart4.vue';
  import eChart5 from './eChart/eChart5.vue';
  import eChart6 from './eChart/eChart6.vue';
  import alarmList from './eChart/alarmList.vue';
  import DeviceTree from "./common/DeviceTree";
  import MapComponent from "./eChart/MapComponent";
  import MapComponents from "./eChart/MapComponents";
  import "./eChart/index.css";
  import ScreenAlarm from './common/ScreenAlarm.vue'

  // 导出组件
  export default {
    name: "corporateCenter",
    components: {
      alarmList,
      DeviceTree,
      MapComponent,
      MapComponents,
      eChart1,
      eChart2,
      eChart3,
      eChart4,
      eChart5,
      eChart6,
      ScreenAlarm
    },
    data() {
      return {
        boxId: '',
        isEmpty: false,
        isWEmpty: false,
        aisMessages: [],
        shipMessage: {},
        mapRef: null, // 存储 MapComponent 组件的引用
        alarmRef: null, // 存储 alarmList 组件的引用
        eChart1Ref: null, // 存储 eChart1 组件的引用
        eChart2Ref: null, // 存储 eChart2 组件的引用
        eChart3Ref: null, // 存储 eChart3 组件的引用
        eChart4Ref: null, // 存储 eChart4 组件的引用
        eChart5Ref: null, // 存储 eChart5 组件的引用
        eChart6Ref: null, // 存储 eChart6 组件的引用
        departmentProps: {
          children: "children",
          label: "deptName",
        }, // 部门树属性
        departmentData: [], // 部门树数据
        alarmList: [], // 告警列表
        hasMenu: true,
        alarmTotal: 0,
        aisMessage: {}
      };
    },
    mounted() {
      this.getLatest() // 右下告警统计
      this.getDepartment(); // 获取部门树
      this.getSystemInfo(); // 获取系统信息
      this.getSystemMessageInfo(); // 获取数据信息
      this.getAiPosition(); // AI抓怕分布
      this.getSystemWeekInfo(); // 获取告警趋势
      this.setMenu();
    },
    methods: {
      setMenu() {
        const { fullPath } = this.$route;
        // http://xxx.xxx.xxxx/#/DataScreenLayout/0 隐藏菜单栏
        if (fullPath == '/DataScreenLayout/0') {
          this.hasMenu = false;
        } else {
          this.hasMenu = true;
        }
      },
      // 告警趋势
      getSystemWeekInfo() {
        const that = this;
        that.isWEmpty = false;
        this.$axios({
          method: 'get',
          url: `/api/message/get-by-week?boxId=${that.boxId}`,
        }).then((res) => {
          if (res.data.data == null) {
            that.isWEmpty = true;
            return
          }
          if (res.data.code == 0) {
            that.$refs.eChart1Ref.initDataChart(res.data.data);
          }
        }).catch((error) => {
        });
      },
      // 获取数据信息
      getSystemMessageInfo() {
        const that = this;
        that.isEmpty = false;
        this.$axios({
          method: 'get',
          url: `/api/message/get-by-type?boxId=${that.boxId}`,
        }).then((res) => {
          if (res.data.data.length == 0) {
            that.isEmpty = true;
            return
          }
          if (res.data.code == 0) {
            const array = []
            this.alarmTotal = 0;
            res.data.data.forEach((item) => {
              array.push({ value: item.num || 0, name: item.algorithm });
              this.alarmTotal += item.num || 0;
            })
            // that.$refs.eChart2Ref.initChart(array);
            const eChart3Data = array.sort((a, b) => {
              a.name = a.name.replace('识别告警', '')
              return b.value - a.value;
            });
            that.$refs.eChart3Ref.initChart(eChart3Data);
            that.$refs.eChart4Ref.initChart(array);
          }
        }).catch((error) => {
        });
      },
      // 获取数据信息
      getAiPosition() {
        const that = this;
        that.isEmpty = false;
        this.$axios({
          method: 'get',
          url: `/api/message/get-by-position?boxId=${that.boxId}`,
        }).then((res) => {
          if (res.data.data.length == 0) {
            that.isEmpty = true;
            return
          }
          if (res.data.code == 0) {
            const array = []
            res.data.data.forEach((item) => {
              array.push({ value: item.num || 0, name: item.cameraName });
            })
            that.$refs.eChart2Ref.initChart(array);
          }
        }).catch((error) => {
        });
      },
      // 获取系统信息
      getSystemInfo() {
        const that = this;
        this.$axios({
          method: 'get',
          url: `/api/server/system/info`,
        }).then((res) => {
          if (res.data.code === 0) {
            that.$refs.eChart6Ref.aucDrawLine(res.data.data.cpu[0].data / 1);
            let num = Math.trunc(res.data.data.mem[0].data * 100)
            let name = num + '%';
            that.$refs.eChart6Ref.aucDrawLine(res.data.data.mem[0].data, name);
          }
        }).catch((error) => { });
      },
      // 获取部门树
      getDepartment() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/tree`,
          })
          .then((res) => {
            if (res.status == 200) {
              that.departmentData = res.data.data;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      // ais信息
      getAisMessage(id) {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/message/get-ship-ais?deptId=` + id,
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.aisMessage = res.data.data;
            }
          });
      },
      // 点击部门树
      departmentClick(data, node, element) {
        this.boxId = data.boxId;
        this.getSystemMessageInfo(); // 获取数据信息
        this.getAiPosition(); // AI抓怕分布
        this.getSystemWeekInfo(); // 获取告警趋势
        this.shipMessage = data
        this.getShipInfo(data.id);
        const that = this;
        if (data.kind == undefined) {
          this.$router.push('/live');
        }
        // 0为公司 1为船舶, 2为船队
        if (data.kind == 1) {
          this.getAisMessage(data.id);
        }
        // data.kind === 1 不显示点位
        if (data.children.length == 0 && data.kind != 1) {
          that
            .$axios({
              method: "get",
              url: `/api/department/channels/dept-id?id=` + data.id,
            })
            .then((res) => {
              if (res.data.code == 0) {
                if (res.data.data.length > 0) {
                  data.children = res.data.data.map((item) => {
                    return {
                      ...item,
                      cameraShow: true,
                      deptName: item.name,
                    };
                  });
                  node.expanded = true;
                }
                return;
              }
              this.$message.error(res.data.msg);
            })
            .catch((error) => {
              console.log(error);
            });
        }
        // console.log('node', node);
        // console.log('element', element);
      },
      getShipInfo(id) {
        const that = this;
        this.$axios({
          method: 'get',
          url: `/api/message/get-ship-ais?deptId=${id}`,
        }).then((res) => {
          that.aisMessages = [];
          if (res.data.code == 0 && res.data.data.aisMessages.length > 0) {
            that.aisMessages = res.data.data.aisMessages;
            setTimeout(() => {
              that.$refs.mapRef.init(res.data.data.aisMessages);
              that.$refs.mapRef.init(res.data.data.aisMessages);
            }, 500)
          }
        }).catch((error) => { });
      },
      // 右下告警统计
      getLatest() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/message/latest`,
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.alarmList = res.data.data;
              that.$refs.alarmRef.alarmList = res.data.data;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
    },
  };
</script>

<style scoped>
  .el-tree-node:focus>.el-tree-node__content {
    color: #fff !important;
    background-color: #40a9ff !important;
  }

  .left-top {
    overflow: hidden;
    height: 50%;
  }

  .chart-alarm {
    width: 100%;
    height: 80%;
    overflow: hidden;
    margin-top: 10%;
  }

  .chart-box {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
  }

  .chart-box .chart-right-bottom {
    width: 44%;
    height: 78%;
    margin: 0 2%;
    margin-top: 14%;
  }

  .ship-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-left: 5%;
  }

  .ship-list .ship-item {
    width: 45%;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .tree-box .el-tree {
    color: #fff;
    height: 90%;
    overflow: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0) !important;
  }


  .panel1-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;

    .panel1-item {
      display: flex;
      align-items: center;
      margin: 20px 1%;
      width: 30%;

      img {
        width: 40px;
        height: 40px;
      }

      div {
        margin-left: 8px;
        font-size: 14px;

        span {
          padding-top: 4px;
          display: block;
          font-weight: bold;
          font-size: 20px;
        }
      }
    }
  }

  .tree-box {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 50px;
    overflow: hidden;
  }

  .progress-box {
    width: 80%;
    margin: 25px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 基础样式 */
  .data-screen {
    width: 100%;
    height: 100vh;
    background: radial-gradient(40em at top, #002066 0, #020923 100%);
    color: #fff;
    font-family: 'Microsoft YaHei', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .full-screen-height {
    height: calc(100vh - 80px);
  }

  /* 顶部标题样式 */
  .header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('https://ent.toujianyun.com/_v3/img/month-report-echart-head-bg.262baa1f.png') repeat 50%;
  }

  .header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
  }

  /* 主内容区样式 */
  .main-container {
    flex: 1;
    display: flex;
    padding: 15px;
    gap: 20px;
  }

  /* 左右列样式 */
  .left-column,
  .right-column,
  .center-panel {
    width: 24.2%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100vh - 80px);
    /* 计算逻辑：总视口高度 - 顶部标题高度 - 底部区域高度 - 主容器上下内边距 */
    overflow-y: auto;
    /* 内容超出时显示滚动条 */
    overflow-x: hidden;
    /* 禁止水平滚动 */
  }

  .full-screen-column,
  .center-panel {
    height: calc(100vh - 140px);
  }

  /* 中间主面板样式 */
  .center-panel {
    width: 50%;
  }
  .map-box {
    flex: 2;
    height: 100%;
    width: 100%;
    background: url('https://ent.toujianyun.com/_v3/img/month-report-echart-item-bg.12db96cb.png') no-repeat 50% / 100% 100%;
  }

  .panel-body {
    height: 100%;
    width: 100%;
    display: flex;
    flex: 1;
  }
  .panel-body .panel {
    flex: 1;
    gap: 20px;
  }
  .panel-left {
    margin-right: 10px;
  }
  .panel-right {
    margin-left: 10px;
  }

  /* 通用面板样式 */
  .panel {
    overflow: hidden;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    background: url('https://ent.toujianyun.com/_v3/img/month-report-echart-item-bg.12db96cb.png') no-repeat 50% / 100% 100%;
  }

  .panel .panel-title {
    color: #fff;
    font-size: 16px;
    letter-spacing: 2px;
    position: absolute;
    top: 20px;
    left: 32px;
  }

  /* 左右侧面板高度 */
  .left-column .panel {
    height: 30vh;
  }
  .right-column .panel {
    height: 100vh;
  }

  /* 底部样式 */
  .footer {
    height: 30%;
    display: flex;
    padding: 0 15px 15px 15px;
    gap: 20px;
  }

  .alarm-total {
    font-size: 14px;
    color: #FAC858;
  }
</style>
